{% extends "templates/main_template.html.j2" %}

{% import "macros/switch.html.j2" as SWITCH %}
{% import "macros/select_options.html.j2" as SELECT_OPTIONS %}
{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}

{% set active_menu = 'roles' %}
{% set tab_menu = [
  ['Свойства роли', 'properties'],
  ['Правила', 'rules'],
  ['Меню роли', 'menu_item'],
] %}

{% block title %}
  {%- if target_role -%}
    {{ target_role.caption|e }} · Роль · Farado
  {%- else -%}
    Новая роль · Farado
  {%- endif -%}
{%- endblock %}

{#----------------------------------------------------------------------------#}
{% block styles %}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">
      {% if target_role %}
        {{ target_role.caption|e }}
      {% else %}
        Новая роль
      {% endif %}
    </li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{# Таб 1 — Свойства роли #}
{% block tab_content_1 %}
  {# INFO : Форма начинается в первом табе и заканчивается во втором.
            В каждом табе есть кнопка сохранить. #}
  <form class="row g-3 mt-3" action="/roles/role" method="post">

  <div class="col-12">
    <label for="inputId" class="form-label">Идентификатор</label>
    <input
        type="text"
        name="target_role_id"
        class="form-control"
        id="inputId"
        value="{{ target_role.id }}"
        readonly>
  </div>

  <div class="col-12">
    <label for="inputCaption" class="form-label">Название</label>
    <input
        type="text"
        name="target_role_caption"
        class="form-control"
        id="inputCaption"
        value="{{ target_role.caption|e }}"
        required>
  </div>

  <div class="col-12">
    <label for="inputCaption" class="form-label">Значок</label>
    <input
        type="text"
        name="target_role_icon"
        class="form-control"
        id="inputCaption"
        value="{{ target_role.icon|e }}"
        required>
  </div>

  <hr/>

  <div class="col-12">
    <div class="clearfix">
      {% if target_role %}
        {# -- Кнопка: удалить -- #}
          {{ CONFIRMATION.BUTTON(
              caption = '<i class="bi bi-trash"></i> Удалить',
              title = 'Удалить данную роль',
              class = 'btn btn-danger ml-3 float-start',
              target = 'remove_role_confirmation_'
                  + target_role.id|string)
          }}
          {{ CONFIRMATION.MODAL_WINDOW(
              title = 'Удаление роли',
              text = 'Вы уверены, что хотите навсегда удалить роль «'
                  + target_role.caption|e
                  + '»?',
              action_button_href = '/roles/remove_role/'
                  + target_role.id|string,
              action_button_text = 'Да',
              window_id = 'remove_role_confirmation_'
                  + target_role.id|string)
          }}
        {# -- /Кнопка: удалить -- #}
      {% endif %}

      {# -- Кнопка: сохранить -- #}
        <button
            type="submit"
            id="saveButton"
            class="btn btn-success float-end">
          <i class="bi bi-save"></i> Сохранить
        </button>
      {# -- /Кнопка: сохранить -- #}
    </div>
  </div>
{% endblock tab_content_1 %}

{#----------------------------------------------------------------------------#}
{# Таб 2 — Правила #}
{% block tab_content_2 %}
  {% if target_role %}
    <div class="col-12">         
      <div class="page-toolbar d-flex justify-content-between align-items-center container-button">
        <h5>Правила</h5>
        {# FIXME : If you add a new role, all user changes on this page are discarded. #}
        <a  href="/roles/add_rule?target_role_id={{ target_role.id }}"
            class="btn btn-outline-primary btn-sm"
            type="submit">
          <i class="bi bi-plus mr-1"></i> Создать правило
        </a>
      </div>

      <table class="table mt-4">
        <thead class="table-dark">
          <tr>
            <th scope="col" style="width: 1%">Id</th>
            <th scope="col">Название</th>
            <th scope="col">Администратор</th>
            <th scope="col">Проект</th>
            <th scope="col">Проектные разрешения</th>
            <th scope="col">Тип запроса</th>
            <th scope="col">Рабочий процесс</th>
            <th scope="col">Разрешения на запросы</th>
            <th scope="col" style="width: 1%"></th>
          </tr>
        </thead>
        <tbody>
          {% for rule in project_manager.rules_by_role(target_role.id) %}
            <tr id="rule_row_{{ rule.id }}">
              <th scope="row">{{ rule.id }}</th>
              <td>
                <input
                    type="text"
                    name="rule_caption_{{ rule.id }}"
                    class="form-control form-select-sm"
                    value="{{ rule.caption|e }}"
                    required>
              </td>
              <td>
                {{ SWITCH.INPUT(
                      id = 'rule_is_admin_' + rule.id|string,
                      name = 'rule_is_admin_' + rule.id | string,
                      is_checked = rule.is_admin )
                }}
              </td>
              <td>
                {{ SELECT_OPTIONS.INPUT_SINGLE(
                    data_source = 'projects',
                    name = 'rule_project_id_' + rule.id|string,
                    project_manager = project_manager,
                    selected_id = rule.project_id)
                }}
              </td>
              <td>
                <select
                  class="form-select form-select-sm"
                  name="rule_project_rights_{{ rule.id }}">
                  <option value="0" {% if not rule.project_rights  %}selected{% endif %}>нет</option>
                  <option value="1" {% if 1 == rule.project_rights %}selected{% endif %}>наблюдатель</option>
                  <option value="2" {% if 2 == rule.project_rights %}selected{% endif %}>редактор</option>
                  <option value="4" {% if 4 == rule.project_rights %}selected{% endif %}>создатель</option>
                  <option value="8" {% if 8 == rule.project_rights %}selected{% endif %}>владелец</option>
                </select>
              </td>
              <td>
                {{ SELECT_OPTIONS.INPUT_SINGLE(
                    data_source = 'workflows_issue_kinds',
                    name = 'rule_issue_kind_id_' + rule.id|string,
                    project_manager = project_manager,
                    selected_id = rule.issue_kind_id)
                }}
              </td>
              <td>
                {{ SELECT_OPTIONS.INPUT_SINGLE(
                    data_source = 'workflows',
                    name = 'rule_workflow_id_' + rule.id|string,
                    project_manager = project_manager,
                    selected_id = rule.workflow_id)
                }}
              </td>
              <td>
                <select
                  class="form-select form-select-sm"
                  name="rule_issue_rights_{{ rule.id }}">
                  <option value="0" {% if not rule.issue_rights  %}selected{% endif %}>нет</option>
                  <option value="1" {% if 1 == rule.issue_rights %}selected{% endif %}>наблюдатель</option>
                  <option value="2" {% if 2 == rule.issue_rights %}selected{% endif %}>редактор</option>
                  <option value="4" {% if 4 == rule.issue_rights %}selected{% endif %}>создатель</option>
                  <option value="8" {% if 8 == rule.issue_rights %}selected{% endif %}>владелец</option>
                </select>
              </td>
              <td>
                <a href="#" title="Remove rule" onclick="$('#rule_row_{{ rule.id }}').remove();">
                  <span class="badge bg-danger">x</span>
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="col-12">
      <div class="button-container">
        <button type="submit" id="saveButton" class="btn btn-success">
          <i class="bi bi-save"></i> Сохранить
        </button>
      </div>
    </div>
  {% endif %}

  </form>
{% endblock tab_content_2 %}

{#----------------------------------------------------------------------------#}
{# Таб 3 — Меню роли #}
{% block tab_content_3 %}
  {% if target_role %}
    <div class="col-12">         
      <div class="page-toolbar d-flex justify-content-between align-items-center container-button">
        <h5>Меню роли</h5>
        <a  href="/roles/add_menu_item/{{ target_role.id }}"
            class="btn btn-outline-primary btn-sm"
            type="submit">
          <i class="bi bi-plus mr-1"></i> Создать пункт меню роли
        </a>
      </div>

      <table class="table mt-4">
        <thead class="table-dark">
          <tr>
            <th scope="col" style="width: 2%">№</th>
            <th scope="col" style="width: 16%">Название</th>
            <th scope="col">Ссылка</th>
            <th scope="col" style="width: 16%">Значок</th>
            <th scope="col" style="width: 2%"></th>
          </tr>
        </thead>
        <tbody>
          {% for menu_item in target_role.menu_items %}
            <tr>
              <form
                  id="menu_item_form_{{ menu_item.id }}"
                  action="/roles/save_menu_item/{{ target_role.id }}/{{ menu_item.id }}"
                  method="post">
                <th scope="row">{{ menu_item.id }}</th>
                <td>
                  <input
                      type="text"
                      name="menu_item_caption"
                      class="form-control form-select-sm"
                      value="{{ menu_item.caption|e }}"
                      required>
                </td>
                <td>
                  <input
                      type="text"
                      name="menu_item_link"
                      class="form-control form-select-sm"
                      value="{{ menu_item.link|e }}"
                      required>
                </td>
                <td>
                  <input
                      type="text"
                      name="menu_item_icon"
                      class="form-control form-select-sm"
                      value="{{ menu_item.icon|e }}">
                </td>
                <td>
                  <div style="white-space: nowrap">
                    <a href="#"
                        onclick="$('#menu_item_form_{{ menu_item.id }}').submit();"
                        title="Сохранить фильтр">
                      <i class="bi bi-save"></i>
                    </a>
                    <a href="/roles/remove_menu_item/{{ target_role.id }}/{{ menu_item.id }}"
                        title="Удалить фильтр">
                      <i class="bi bi-trash"></i>
                    </a>
                  </div>
                </td>
              </form>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
{% endblock tab_content_3 %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  <script>
  </script>
{% endblock %}
